<template>
  <!-- 一级菜单 -->
  <div class="menu1">
    <div class="head" @click="toggleShow">
      <div class="title">
        {{ title }}
      </div>
      <div class="folder">
        <i
          class="fa fa-folder"
          :class="isOpen ? 'fa-folder-open' : 'fa-folder'"
          aria-hidden="true"
        ></i>
      </div>
    </div>
    <div class="slotCon" :style="`max-height:${isOpen ? '10rem' : '0rem'}`">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    title: String,
    path: {
      type: String,
      default: "",
    },
  },
  setup() {
    const isOpen = ref(true);

    function toggleShow() {
      isOpen.value = !isOpen.value;
    }
    return { isOpen, toggleShow };
  },
});
</script>
<style lang="scss" scoped>
.menu1 {
  .head {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 2.2rem;
    color: #2c3e50;
    cursor: pointer;
    user-select: none;
    &:hover {
      color: #3eaf7c;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fa {
      transition: 0.3s;
      font-size: 0.8rem;
    }
  }
  .slotCon {
    height: 100%;
    transition: 0.4s;
    overflow-y: auto;
  }
}
</style>
